<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布信息</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../script/layui/layui.css" />
    <style>
        #info .select {
            background-image: none;
        }

        #info .aui-list .select .aui-list-item-inner {
            padding-right: 0;
        }

        #info .select .layui-form {
            background: #0689FB;
            width: 95%;
            margin: 0 auto;
            border-radius: 0.25rem;
        }

        #info .select input {
            text-align: center;
            color: white;
        }

        #info .select input::-webkit-input-placeholder {
            color: white;
        }

        #info .select input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: white;
        }

        #info .select input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: white;
        }

        #info .select input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: white;
        }

        #info .select input::placeholder {
            color: white;
        }

        #info .select .layui-form-select .layui-edge {
            right: 35%;
            border-top-color: white;
        }

        #info .select .layui-form-select dl dd.layui-this {
            background-color: #95CBFA;
            color: black;
        }

        #info .select .layui-form-select dl dd {
            text-align: center;
        }

        #info .aui-list {
            background-image: none;
        }

        #info .aui-list .aui-list-item {
            padding-left: 0;
            margin: .5rem .75rem 0;
        }

        #info .aui-list .aui-list-item:last-child {
            margin: 0;
            border-bottom: .5rem solid #f6f6f6;
            padding: .5rem .75rem 0;
            background-image: none;
        }

        #info .aui-list .aui-list-item-inner {
            align-items: flex-end;
            -webkit-align-items: flex-end;
            padding-right: 0.3rem;
        }

        #info .aui-list.aui-list-in .aui-list-item {
            background-position: 0 bottom;
        }

        #info input {
            text-align: right;
        }

        #info .aui-list-item-input {
            padding-right: 0;
        }

        #details {
            margin: 0 .75rem;
        }

        .up_image_box {
            display: flex;
        }

        .up_image {
            width: calc(33.33% - 0.4rem);
            height: calc(33.33vw - 0.5rem);
            border: 1px solid #E1E1E1;
            margin-right: 0.6rem;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
        }

        .up_image:nth-child(3n) {
            margin-right: 0;
        }

        .textarea {
            width: 100%;
            height: 6rem;
            border: 1px solid #E1E1E1;
            padding: 0.2rem;
        }

        .column_h {
            border-left: 0.2rem solid #0689FB;
            padding-left: 0.4rem;
            margin-bottom: 0.5rem;
        }

        .sub {
            background: #0689FB;
            padding: .75rem 1rem;
            color: white;
            width: 40%;
            text-align: center;
            margin: 3rem auto 1rem;
        }
    </style>
</head>

<body>
    <div>
        <div class="aui-content" id="info">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item select">
                    <div class="aui-list-item-inner">

                        <div class='layui-form'>
                            <select id="types">
                                <option value="">请选择类型</option>
                                <option value="1">回收专区</option>
                                <option value="2">二手专区</option>
                            </select>
                        </div>

                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            标题描述
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="控制在20个字符左右" id="title">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            所在区域
                        </div>
                        <div class="aui-list-item-input" onclick="openCity()">
                            <input type="text" placeholder="请选择" disabled="" id="region">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            详细地址
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请输入详细地址" id="address">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            联系人
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写联系人" id="contact">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            联系方式
                        </div>
                        <div class="aui-list-item-input">
                            <input type="tel" placeholder="请认真填写，以便用户拨号" id="contact_phone">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="aui-content" id="details">
            <div>
                <div style="margin:1rem 0 0.5rem 0;">上传图片<small style="font-size:0.5rem;color:#B7B7B7;">(大小不要超过2MB)</small></div>
                <div class="up_image_box">
                    <div class="up_image" onclick="addImg(this,0)"><img src="../../../image/icon/shangchuan.png" style="width:40%" alt=""></div>
                    <div class="up_image" onclick="addImg(this,1)"><img src="../../../image/icon/shangchuan.png" style="width:40%" alt=""></div>
                    <div class="up_image" onclick="addImg(this,2)"><img src="../../../image/icon/shangchuan.png" style="width:40%" alt=""></div>
                </div>
            </div>
            <div class="column_h">其他要求</div>
            <textarea name="" id="other_notes" class="textarea" placeholder="请输入文字介绍"></textarea>
        </div>

        <div class="sub" onclick="submit()">立即发布</div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/check.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/layui/layui.all.js" charset="utf-8"></script>
<script>
    var region_provinceid = '',
        region_cityid = '',
        region_areaid = '',
        recycle_imgurl_array = [];
    apiready = function() {
        api.parseTapmode();

        //沉浸式状态栏
        var systemType = api.systemType;
        var statusBar = api.require('statusBar');
        if (systemType == "ios") {
            if (navigator.userAgent.indexOf("iPhone") != -1) {
                stateBarH = api.safeArea.top;
            }
        } else {
            statusBar.getStatusBarHeight(function(ret, err) {
                stateBarH = ret.statusHeight;
            });
        }
    }

    function openCity() {
        api.openFrame({
            name: 'mask',
            url: '../../city/city_win.html',
            rect: {
                x: 0,
                y: stateBarH,
                w: 'auto',
                h: 'auto'
            },
            bgColor: 'rgba(0,0,0,0.5)',
            pageParam: {
                name: api.winName,
                frameName: api.frameName
            }
        });
    }

    function addImg(e, i) {
        imageUpload(Config.api.ImageUploadcommon, function(res) {
            if (res.code === 200) {
                $(e).find('img').attr('src', res.data.imgurl).css({'width': '100%', 'height': '100%'});
                recycle_imgurl_array[i] = res.data.imgurl;
            }
        });
    }

    function setCity(province, city, area) {
        var data = {
            "provinceid": province.code,
            "province": province.name,
            "cityid": city.code,
            "city": city.name,
            "areaid": area.code,
            "area": area.name
        };
        region_provinceid = province.code;
        region_cityid = city.code;
        region_areaid = area.code;
        $("#region").val(province.name + ' ' + city.name + ' ' + area.name);
    }

    function submit() {
        var data = {
            user_id: get_local('userInfo').user_id,
            types: $('#types').find("option:selected").val(),
            title: $('#title').val(),
            region_provinceid: region_provinceid,
            region_cityid: region_cityid,
            region_areaid: region_areaid,
            region: $('#region').val(),
            address: $('#address').val(),
            contact: $('#contact').val(),
            contact_phone: $('#contact_phone').val(),
            recycle_imgurl_array: recycle_imgurl_array,
            other_notes:$('#other_notes').val()
        };

        if (!is_define(data.types)) {
            $toast('请选择类型');
            return;
        } else if (!is_define(data.title)) {
            $toast('请输入标题描述');
            return;
        } else if (!is_define(data.region)) {
            $toast('请选择所在区域');
            return;
        } else if (!is_define(data.address)) {
            $toast('请输入详细地址');
            return;
        } else if (!is_define(data.contact)) {
            $toast('请输入联系人');
            return;
        } else if (!is_define(data.contact_phone)) {
            $toast('请输入联系方式');
            return;
        } else if (!checkMobile(data.contact_phone)) {
            $toast('请输入有效的联系方式');
            return;
        } else if (data.recycle_imgurl_array.length == 0) {
            $toast('请上传图片');
            return;
        } else if (!is_define(data.other_notes)) {
            $toast('请填写其他要求');
            return;
        }

        _ajax(Config.api.RecycleCreate, data, function(res) {
            if (res.code === 200) {
                $toast('发布成功!');
                setTimeout(function() {
                    close_w();
                }, 1000);
            } else {
                $toast(res.msgs);
            }
        })
    }
</script>

</html>
